@dotNum: 16;
@duration: 6s;
@w: 130px;
@w_c: 35px;
.circle {
  width: @w_c;
  height: @w_c;
  border-radius: @w;
  background: #000;
  animation-duration: @duration;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &.active {
    .dot {
      animation-play-state: running;
      .dotIn {
        animation-play-state: running;
      }
    }
  }
}
.viewBox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: @w;
  height: @w;
}

.dot {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 0px - @w_c * 0.5;
  margin-top: 0px - @w_c * 0.5;
  animation-duration: @duration * 1.5;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: g_ani;
  animation-play-state: paused;
  .dotIn {
    .circle;
    background: #9b967c;
    animation-name: y_ani;
    animation-play-state: paused;
  }
}
.dot2 {
  .dotIn {
    background: #a1b489;
    transform: scale(0.6);
  }
  animation-duration: @duration * 1;
  animation-delay: 5 * @duration / 6 - @duration;
}
.dot3 {
  .dotIn {
    background: #b0ab8f;
    transform: scale(0.8);
  }
  animation-duration: @duration * 1.2;
  animation-delay: 4 * @duration / 6 - @duration;
}
.dot4 {
  .dotIn {
    background: #98baaf;
  }
  animation-duration: @duration * 1.3;
  animation-delay: 3 * @duration / 6 - @duration;
}
.dot5 {
  .dotIn {
    background: #9ba6b9;
  }
  animation-duration: @duration * 1.4;
  animation-delay: 2 * @duration / 6 - @duration;
}
.dot6 {
  .dotIn {
    background: #809467;
  }
  animation-duration: @duration * 1.6;
  animation-delay: @duration / 6 - @duration;
}

@keyframes g_ani {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg * 5);
  }
}
@keyframes y_ani {
  0% {
    transform: translate(0px, 0px);
  }
  15% {
    transform: translate(0px - @w_c, 0px);
  }
  85% {
    transform: translate(0px - @w_c, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
